<template>
    <div>
        <h2>添加商品</h2>
        <p>商品名称：<input type="text" v-model="name"></p>
        <p>商品价格：<input type="text" v-model="price"></p>
        <p>商品图片: <input type="file" @change="get_file($event)"></p> 
        <p><select v-model="cate">
                <option v-for="(i,d) in cates" :value="i.id" :key="d">{{i.name}}</option>    
            </select>
        </p> 
        <quill-editor 
            v-model="content" 
            ref="myQuillEditor" 
            :options="editorOption">
        </quill-editor>
        <!-- 从数据库读取展示 -->
        <p><button @click="addgoods()">提交</button></p>
        <div v-html="str" class="ql-editor">
            {{str}}
        </div>
        {{str}}  
        <button @click="addgoods()">添加</button>
        <p></p>
        <button @click="sub()">跳转展示</button>
    </div>    
</template>

<script>
import axios from "axios"
import {get_cate} from "../axios_api/api.js"
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
    name:"addgoods",
    components: {
        quillEditor
    },
    data() {
        return {
            name:"",
            price:"",
            cate:"",
            cates:"",
            content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
            str: '',
            editorOption: {},
        }
    },
    methods:{
        get_cate(){
            get_cate().then(res=>{
                console.log(res)
                this.cates = res.data
            })
        },
        get_file(event){
            this.file = event.target.files[0]
        },
        addgoods(){
            let formdata = new FormData()
            formdata.append("name",this.name)
            formdata.append("price",this.price)
            formdata.append("pic",this.file)
            formdata.append("cate",this.cate)
            formdata.append("content",this.content)
            axios({
                url:"http://127.0.0.1:8000/app01/goods/",
                method:"post",
                data:formdata
            }).then(res=>{
                console.log(res.data)
            })
        },
        sub(){
            this.$router.push({"name":"showgoods"})
        }
    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        },
    },
    created(){
        this.get_cate()
    }
}
</script>

<style>

</style>
